/*tab组件
  Create At 2017-12-23
*/

var eventList=[];
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    windowWidth:{
      type:Number,
      value:0
    },
    tabWidth:{
      type:Number,
      value:0
    },
    baseClass:{
      type:String,
      value:"tab-default"
    },
    tiggerClass:{
      type:String,
      value:"tab-activity"
    },
    tabLineWidth:{
      type:Number,
      value:0
    }
  },
  attached:function(){

    
  },
  ready:function(){
    var systemInfo = wx.getSystemInfoSync();
    var windowWidth = systemInfo.windowWidth;
    var tabData = this.data.bindData;
    var that=this;
    if(tabData==undefined||tabData==null){
      return;
    }

    for (var index = 0; index < tabData.length;index++){
      tabData[index]["tabClass"] = this.data.baseClass;
      tabData[index]["tabAnimate"]=null;
    }
 
    /*初始化tab基础样式*/
    var tabLineWidth = windowWidth / tabData.length;

    this.setData({
      tabLineWidth: tabLineWidth,
      tabWidth: tabLineWidth
    });



    this.setTab(0);

  },

  /**
   * 组件的初始数据
   */
  data: {
    bindData:null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /*绑定tab点击事件*/
    ontabTap:function(fn){
 
      if(typeof(fn)!=="function"){
        return;
      }

      eventList=[];
      eventList.push(fn);
    },

    /*设置tab索引方法 */
    setTab:function(index){
      this._tabAnimate(index, this.data.tabLineWidth);
    },

    /*tap原始事件 */
    tabTap:function(event){
      for (var index = 0; index < eventList.length;index++){
        eventList[index].call(this,event);
      }
      var index = event.currentTarget.dataset.index;
      var tabWidth = event.currentTarget.dataset.tabwidth;
      /*执行对应的动画滚动*/
      this._tabAnimate(index, tabWidth);
    },

    /*动效*/
    _tabAnimate:function(index,tabWidth){
      var moveX = index * tabWidth;
      var tabLineAnimation = wx.createAnimation({
        duration: 200,
        timingFunction: "ease"
      });

      tabLineAnimation.translateX(moveX).step();
      
      /*设置tab字体颜色,以及动效*/
      var tabObj = this.data.bindData;

      /*还原默认样式以及动效 */
      for (var forIndex = 0; forIndex < tabObj.length; forIndex++) {
        tabObj[forIndex].tabClass = this.data.baseClass;
        
        if (tabObj[forIndex].tabAnimate!=null){
          tabObj[forIndex].tabAnimate=wx.createAnimation({
            duration:200,
            timingFunction:"ease"
          });
          tabObj[forIndex].tabAnimate.scale(1).step(); 
        }
      }
      
      /*为指定tab添加样式以及动效 */
      tabObj[index].tabClass = this.data.tiggerClass;
      tabObj[index].tabAnimate = wx.createAnimation({
        duration: 200,
        timingFunction: "ease",
      });

      tabObj[index].tabAnimate.scale(1.25).step();

      this.setData({
        tabLineAnimation: tabLineAnimation.export(),
        "bindData": tabObj
      });
    }
  }
})
